<template>
  <div class="duration">
    <div class="content-top">
      <span>剩休管理</span>
    </div>
    <!--左边二级侧边栏-->
    <div class="content-left active">
      <div class="menu-item">
        <router-link to="/rest/type">时长类型管理</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/rest/duration">员工时长管理</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/rest/overtime">员工加班时长调整</router-link>
      </div>
    </div>
    <!--右边内容-->
    <div class="content-right active">
      <div class="content-head">
        <div class="input-item fl flex flex-y-center">
          <span class="span-title fl">工号：</span>
          <span class="span-input fl"
            ><el-input
              v-model="tableConfig.params.workerNo"
              placeholder="请输入工号"
            ></el-input
          ></span>
        </div>
        <div class="input-item fl flex flex-y-center">
          <span class="span-title fl">姓名：</span>
          <span class="span-input fl"
            ><el-input
              v-model="tableConfig.params.workerName"
              placeholder="请输入姓名"
            ></el-input
          ></span>
        </div>
        <!-- <div class="input-item fl flex flex-y-center">
                <span class="span-title fl">月份：</span>
                <span class="span-input fl">
                  <el-input v-model="tableConfig.params.mouthTime" placeholder="例如 201909"></el-input>
                </span>
            </div> -->
        <div class="input-item fl flex flex-y-center">
          <span class="span-title fl">选择部门：</span>
          <span class="span-input fl">
            <el-select
              v-model="tableConfig.params.deptId"
              clearable
              placeholder="请选择部门"
            >
              <el-option
                v-for="item in mask.deptIdOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </span>
        </div>
        <div class="input-item fl">
          <span class="span-input fl">
            <el-button
              type="primary"
              @click="
                () => {
                  ;(tableConfig.pparams = Object.assign(
                    {pageNum: 1, pageSize: 15},
                    tableConfig.params,
                  )),
                    FnSearch()
                }
              "
              >查询</el-button
            >
          </span>
        </div>
      </div>
      <div class="content-table">
        <Table
          ref="Table"
          :atone="true"
          :columns="tableConfig.columns"
          :url="tableConfig.url"
          :pparams="tableConfig.pparams"
          @tableBubbling="tableBubbling"
        ></Table>
      </div>
    </div>
    <!--各种弹窗-->
    <Vmask :mask="mask" @FnMask="FnMask" />
  </div>
</template>
<script>
import Vmask from '@/components/vmask.vue'
import Table from '@/components/table.vue'
import mixins from '@/const/mixins'

export default {
  name: 'Duration',
  components: {
    Vmask,
    Table,
  },
  mixins: [mixins],
  data() {
    return {
      activeName: '1',
      data5: [],
      tableConfig: {
        url: '/rest/selectRestremaining',
        columns: [
          {
            dataIndex: 'workerNo',
            title: '工号',
          },
          {
            dataIndex: 'workerName',
            title: '姓名',
          },
          {
            dataIndex: 'deptName',
            title: '部门',
          },
          {
            title: '可休时长',
            align: 'center',
            children: [
              {
                title: '加班可休(小时)',
                dataIndex: 'overTime',
              },
              {
                title: '年假可休(小时)',
                dataIndex: 'holiday',
              },
              {
                title: '节假补休(小时)',
                dataIndex: 'annual',
              },
            ],
          },
          {
            title: '剩余时长',
            align: 'center',
            children: [
              {
                title: '加班剩余(小时)',
                dataIndex: 'overtimemaining',
              },
              {
                title: '年假剩余(小时)',
                dataIndex: 'holidaymaining',
              },
              {
                title: '节假剩余(小时)',
                dataIndex: 'annualmaining',
              },
            ],
          },
        ],
        params: {
          workerNo: null,
          workerName: null,
          mouthTime: null,
          deptId: null,
        },
        pparams: {},
        tableLoading: false,
        tableData: [
          {
            n1: 1,
            n2: 2,
            n3: 3,
            n4: 4,
            n5: false,
          },
        ],
      },
      mask: {
        title: '',
        showMask: false,
        form: [
          {
            title: '工号',
            width: '',
            type: 'text',
            name: 'name',
            value: '',
            default: '',
            placeholder: '请填写工号',
            disabled: false,
            required: false,
          },
        ],
        width: '28%',
        btnLoading: false,
        deptIdOptions: [],
      },
    }
  },
  created() {
    window._this = this

    this.getDepartmentList(0) // 获取部门列表
  },
  methods: {
    async FnSearch() {
      let params = this.tableConfig.pparams
      setTimeout(() => {
        this.$refs['Table'].fetchList(true)
      }, 100)
    },
    FnMask(e) {
      console.log(e, 'e')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
      if (type == 'cancel') {
        mask.showMask = false
      }
    },
    tableBubbling(e) {
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
    },
  },
}
</script>

<style lang="less">
.duration {
  .content-left {
  }

  .content-content-right {
    min-height: calc(100vh - 60px - 50.8px - 60px);
  }

  .content-content-top {
    padding-top: 14px;
    font-weight: bold;
  }
}
</style>
